<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>非单文件组件</title>
  <script src="../js/vue.js"></script>
</head>
<body>
   <div id="root">
      <!-- (7) 第三步：使用组件(当作标签一样使用) -->
      {{msg}}
      <hr>
      <hello></hello>
      <hr>
      <school></school>
      <hr>
      <student></student>
      <hr>
      <div id="root2">
         <hello></hello>
      </div>
   </div>

   <script type='text/javascript'>
      
      // (1) 第一步：创建school组件
      const school = Vue.extend({
        // (2) 组件定义的时候，不能写el:''，不需要写为谁服务，因为它需要被复用，最后由一个vm来调用
        /**
         * (3) 在组件里的data要用函数的形式，因为对象的形式存在一个引用关系会相互影响  
         *     而使用函数每次返回一个新的对象就不会相互干扰了
         * */ 
        template:`
           <div>
              学校：{{schoolName}}
              <br> <br>
              地点：{{address}}
           </div>
        `,
        data(){
           return {
              schoolName:'尚硅谷',
              address:'北京昌平'
           }
        }
      })
      // (1) 第一步：创建student组件
      const student = Vue.extend({
         template:`
           <div>
              姓名：{{studentName}}
              <br> <br>
              年龄：{{age}}
           </div>
        `,
         data(){
            return {
               studentName:'周杰',
               age:18
            }
         }
      })

      const hello = Vue.extend({
         template:`
             <div>
               <h1>Hello</h1>
             </div>
         `,
      })

      // (5) 全局注册组件，参数分别为 组件名，组件变量，这样各个实例都可以用了
      Vue.component('hello',hello)

      //  创建Vue实例vm 
       new Vue({
           el:'#root',
           // (5) vm实例里面是可以写data对象形式的，它就是最顶层只有他一个不用考虑相互连带问题   
           data:{
             msg:'你好啊！'
           },
           // (6) 第二步：注册组件(局部)   
           components:{
            // (4) 直接把组件当作是一个属性，牛啊！！！套娃，同时要熟悉一下简写形式(属性名和值同名)
              school,
              student,
              hello
           }
       })

       new Vue({
         el:"root2"
       })
   </script>
</body>
</html>